<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;}
        .container{
            width: 912px;
            height: 600px;
            margin: 0 auto;
        }
        .box{
            width: 275px;
            height: 275px;
            border: 6px solid #ccc;            
            position: relative;
            float: left;
            margin-right: 25px;
            margin-bottom: 25px;
        }
        .box .pic{
            width: 100%;
            height: 100%;
        }
        .box .icon{
            position: absolute;
            left: 7px;
            bottom: 7px;
        }
        .box .greenicon{
            display: none;
        }
        .box:hover .greenicon{
            display: block;
        }
        .box p{
            color: white;
            padding: 7px 5px;
            position: absolute;
            top: 0;
            left: 0;
            display: none;
        }
        .box:hover p{
            display: block;
        }
        .box:hover .pic{
            opacity: 0.6;
        }
        .picrightzero{
            margin-right: 0;
        }
        .picbottomzero{
            margin-bottom: 0;
            /* 其实这个下边距不用管 */
        }
        /* 这里出现的问题 */
        /* 类的优先级，最后设置是否成功 */
        /* 玛德不是优先级是睁眼瞎，那不平级的嘛一个属性的两个类你给他看成父子了人家是兄弟 */
    </style>
</head>
<body>
    <div class="container">
        <div class="box">
            <img src="../html/images/020.png" class="pic">
            <img src="../html/images/020-2.png" class="icon">
            <img src="../html/images/020-3.png" class="icon greenicon">
            <p>
                <img src="../html/images/020-4.png" alt="">
                    摸鱼儿·雁丘词 [金]元好问
            </p>
        </div>
        <div class="box">
            <img src="../html/images/020.png" class="pic">
            <img src="../html/images/020-2.png" class="icon">
            <img src="../html/images/020-3.png" class="icon greenicon">
            <p>
                <img src="../html/images/020-4.png" alt="">
                问世间，情是何物，直教生死相许。
                
            </p>
        </div>
        <div class="box picrightzero">
            <img src="../html/images/020.png" class="pic">
            <img src="../html/images/020-2.png" class="icon">
            <img src="../html/images/020-3.png" class="icon greenicon">
            <p>
                <img src="../html/images/020-4.png" alt="">
                天南地北双飞客，老翅几回寒暑。<br>
                欢乐趣，离别苦，就中更有痴儿女。
            </p>
        </div>
        <div class="box .picbottomzero">
            <img src="../html/images/020.png" class="pic">
            <img src="../html/images/020-2.png" class="icon">
            <img src="../html/images/020-3.png" class="icon greenicon">
            <p>
                <img src="../html/images/020-4.png" alt="">
                君应有语：渺万里层云，千山暮雪，之影向谁去？
            </p>
        </div>
        <div class="box .picbottomzero">
            <img src="../html/images/020.png" class="pic">
            <img src="../html/images/020-2.png" class="icon">
            <img src="../html/images/020-3.png" class="icon greenicon">
            <p>
                <img src="../html/images/020-4.png" alt="">
                横汾路，寂寞当年箫鼓，荒烟依旧平楚。<br>
                招魂楚些何嗟及，山鬼暗啼风雨。
            </p>
        </div>
        <div class="box picrightzero .picbottomzero">
            <img src="../html/images/020.png" class="pic">
            <img src="../html/images/020-2.png" class="icon">
            <img src="../html/images/020-3.png" class="icon greenicon">
            <p>
                <img src="../html/images/020-4.png" alt="">
                天也妒，未信与，莺儿燕子俱黄土。<br>
                千秋万古，为留待骚人，狂歌痛饮，来访雁丘处。
            </p>
        </div>
    </div>
</body>
</html>